T.EchartsOverlay = T.Overlay.extend({
    options: {
        opacity: 1, //透明度
        width: 600, // 宽
        height: 400, // 高
    },
    initialize: function (chartOption, options) {
        this._chartOption = chartOption;
        T.setOptions(this, options);
    },
    onAdd: function (map) {
        this._map = map;
        var width = this.options.width;
        var height = this.options.height;
        var point = this.options.point;
        var p = map.lngLatToLayerPoint(new T.LngLat(point[0], point[1])); // 中心
        this._point1 = map.layerPointToLngLat(new T.Point(p.x-width/2, p.y-height/2)); // 左上角
        this._point2 = map.layerPointToLngLat(new T.Point(p.x+width/2, p.y+height/2)); // 右下角

        if (!this._chart) {
            this._initEcharts();
            this._update();
            if (this.options.opacity < 1) {
                this._updateOpacity();
            }
        }
        this._map.on("zoomend", this._update, this)
        this._map.getPanes().overlayPane.appendChild(this._chart);
    },
    onRemove: function () {
        this._map.off("zoomend", this._update, this)
        this._map.getPanes().overlayPane.removeChild(this._chart);
        this._map = null;
        this._chart = null;
    },
    bringToFront: function () {
        if (this._chart) {
            this._chart.parentNode.appendChild(this._chart);
        }
        return this;
    },
    bringToBack: function () {
        if (this._chart) {
            var parent = this._chart.parentNode;
            parent.insertBefore(this._chart, parent.firstChild);
        }
        return this;
    },
    _initEcharts: function () {
        this._chart = document.createElement('div');
    },
    _update: function () {
        var chart = this._chart;
        var p1 = this._map.lngLatToLayerPoint(this._point1);
        var p2 = this._map.lngLatToLayerPoint(this._point2);
        var xt = Math.abs(p1.x - p2.x)
        var yt = Math.abs(p1.y - p2.y)
        chart.style.left = p1.x + "px";
        chart.style.top = p1.y + "px";
        chart.style.width = xt + 'px';
        chart.style.height = yt + 'px';
        try { this._chartEle.dispose(); } catch(e) {}
        this._chartEle = echarts.init(this._chart);
        this._chartEle.setOption(this._chartOption);
    },
    _updateOpacity: function () {
        var el = this._chart;
        if ('opacity' in el.style) {
            el.style.opacity = this.options.opacity;
        } else if ('filter' in el.style) {
            this._setOpacityIE(el, this.options.opacity);
        }
    },
    _setOpacityIE: function (el, value) {
        var filter = false, filterName = 'DXEchartsTransform.Microsoft.Alpha';
        try {
            filter = el.filters.item(filterName);
        } catch (e) {
            if (value === 1) {
                return;
            }
        }
        value = Math.round(value * 100);
        if (filter) {
            filter.Enabled = (value !== 100);
            filter.Opacity = value;
        } else {
            el.style.filter += ' progid:' + filterName + '(opacity=' + value + ')';
        }
    },
    setOpacity: function (opacity) {
        this.options.opacity = opacity;
        if (this._chart) {
            this._updateOpacity();
        }
        return this;
    },
    getOpacity: function () {
        return this.options.opacity ;
    },
    getElement: function () {
        return this._chart;
    },
});
